
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!--引入CSS-->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--引入JS-->
<link rel="stylesheet" type="text/css" href="/ueditor/third-party/webuploader/webuploader.css">
<script type="text/javascript" src="http://www.eyuanonline.com:3333/ueditor/third-party/webuploader/webuploader.min.js"></script>
</head>
<body>
    <div id="uploader" class="wu-example">
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>

    <!--dom结构部分-->
    <div id="uploader-demo">
        <!--用来存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="filePicker">选择图片</div>
    </div>

<!-- 实现录音上传 -->
<script src="/test/video/audio.js"></script>
    <div>
        <audio controls autoplay></audio>
        <input onclick='startRecording()' type='button' value='录音' />
        <input onclick='stopRecording()' type='button' value='停止' />
        <input onclick='playRecording()' type='button' value='播放' />
        <input onclick='uploadAudio()' type='button' value='提交' />
    </div>
    <script>

        var recorder;

        var audio = document.querySelector('audio');

        function startRecording() {
            HZRecorder.get(function (rec) {
                recorder = rec;
                recorder.start();
            });
        }

        function stopRecording() {
            recorder.stop();
        }

        function playRecording() {
            recorder.play(audio);
        }

        function uploadAudio() {
            recorder.upload('Handler1.ashx', function (state, e) {
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        break;
                    case 'ok':
                        //alert(e.target.responseText);
                        alert('上传成功');
                        break;
                    case 'error':
                        alert('上传失败');
                        break;
                    case 'cancel':
                        alert('上传被取消');
                        break;
                }
            });
        }

    </script>

    <!--  
    理想情况下我们应该先判断你的设备上是否  
    有摄像头或相机，但简单起见，我们在这里直接  
    写出了HTML标记，而不是用JavaScript先判断  
    然后动态生成这些标记  
    -->  
    <textarea id="image"></textarea>
    <video id="video" width="640" height="480" autoplay></video>  
    <button  onclick="video.pause();">stop</button>
    <button  onclick="video.play();">play</button>
    <button  onclick="scamera();">拍照</button>
    <button  onclick="CatchCode();">图片编码</button>
    <canvas id="canvas" width="640" height="480"></canvas>  


            
            <script type="text/javascript">

    // // var socket = new WebSocket("ws://www.eyuanonline.com:3333/test/video/?name=negocat");
    // // socket.onopen = function(){
    // //     send();
    // // }
    //             // Put event listeners into place  
    // window.addEventListener("DOMContentLoaded", function() {  
    //     // Grab elements, create settings, etc.  
    //     canvas = document.getElementById("canvas"),  
    //         context = canvas.getContext("2d"),  
    //         video = document.getElementById("video"),  
    //         videoObj = { "video": true, "audio":true },  
    //         errBack = function(error) {  
    //             console.log("Video capture error: ", error.code);   
    //         };  
      
    //     // Put video listeners into place  
    //     if(navigator.getUserMedia) { // Standard  
    //         navigator.getUserMedia(videoObj, function(stream) {  
    //             video.src = stream;  
    //             video.play();  
    //         }, errBack);  
    //     } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
    //         navigator.webkitGetUserMedia(videoObj, function(stream){  
    //             console.log(stream)
    //             video.src = window.webkitURL.createObjectURL(stream);  
    //             video.play();  
    //         }, errBack);  
    //     }  
    //     else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
    //         navigator.mozGetUserMedia(videoObj, function(stream){  
    //             video.src = window.URL.createObjectURL(stream);  
    //             video.play();  
    //         }, errBack);  
    //     }  
    // }, false);  
    
    // function scamera(){
    //     context.drawImage(video, 0, 0, canvas.width, canvas.height);
    // }
    // function CatchCode() {
    //     context.drawImage(video, 0, 0, canvas.width, canvas.height);
    //     //以下开始编 数据
    //     var imgData = context.canvas.toDataURL("image/WebP", 0.5);//WebP
    //     //将图像转换为base64数据
    //     var base64Data = imgData;
    //     $('#image').html(imgData);
    //     // return imgData
    // }
    // function send(){
    //     if(video.src){
    //         socket.send(CatchCode());
    //     }
    //     setTimeout(send, 50);
    // }
            </script>
<script type="text/javascript">
//文件上传
    // var $ = jQuery,
    //     $list = $('#thelist'),
    //     $btn = $('#ctlBtn'),
    //     state = 'pending',
    //     uploader;
    // var uploader = WebUploader.create({// swf文件路径
    //     swf: '/ueditor/third-party/webuploader/Uploader.swf',// 文件接收服务端。
    //     server: 'http://webuploader.duapp.com/server/fileupload.php',// 选择文件的按钮。可选。
    //     // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    //     pick: '#picker',// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    //     resize: false
    // });
    // // 当有文件添加进来的时候
    // uploader.on( 'fileQueued', function( file ) {
    //     $list.append( '<div id="' + file.id + '" class="item">' +
    //         '<h4 class="info">' + file.name + '</h4>' +
    //         '<p class="state">等待上传...</p>' +
    //     '</div>' );
    // });
    // // 文件上传过程中创建进度条实时显示。
    // uploader.on( 'uploadProgress', function( file, percentage ) {
    //     var $li = $( '#'+file.id ),
    //         $percent = $li.find('.progress .progress-bar');

    //     // 避免重复创建
    //     if ( !$percent.length ) {
    //         $percent = $('<div class="progress progress-striped active">' +
    //           '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    //           '</div>' +
    //         '</div>').appendTo( $li ).find('.progress-bar');
    //     }

    //     $li.find('p.state').text('上传中');

    //     $percent.css( 'width', percentage * 100 + '%' );
    // });
    // uploader.on( 'uploadSuccess', function( file ) {
    //     $( '#'+file.id ).find('p.state').text('已上传');
    // });

    // uploader.on( 'uploadError', function( file ) {
    //     $( '#'+file.id ).find('p.state').text('上传出错');
    // });

    // uploader.on( 'uploadComplete', function( file ) {
    //     $( '#'+file.id ).find('.progress').fadeOut();
    // });

    // uploader.on( 'all', function( type ) {
    //     if ( type === 'startUpload' ) {
    //         state = 'uploading';
    //     } else if ( type === 'stopUpload' ) {
    //         state = 'paused';
    //     } else if ( type === 'uploadFinished' ) {
    //         state = 'done';
    //     }

    //     if ( state === 'uploading' ) {
    //         $btn.text('暂停上传');
    //     } else {
    //         $btn.text('开始上传');
    //     }
    // });

    // $btn.on( 'click', function() {
    //     if ( state === 'uploading' ) {
    //         uploader.stop();
    //     } else {
    //         uploader.upload();
    //     }
    // });

        //图片上传
        var $ = jQuery,
        $imgtype = 'gif,jpg,jpeg,bmp,png',
        $list = $('#fileList'),
        $btn = $('#ctlBtn'),
        state = 'pending',
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,

        // Web Uploader实例
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({// 自动上传。
            // auto: true,// swf文件路径
            swf: '/ueditor/third-party/webuploader/Uploader.swf',// 文件接收服务端。// 文件接收服务端。
            server: '/fileupload.php',// 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',// 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: $imgtype,
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');$list.append( $li );

            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"><span class="sr-only"></span></div>iv>')
                        .appendTo( $li )
                        .find('span');
            }
            $percent.css( 'width', percentage * 100 + '%' );
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-done');
        });
        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');
            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });
        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }
            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });
        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="http://www.eyuanonline.com:3333/admin/js/sha1.js"></script>
<script type="text/javascript" src="http://www.eyuanonline.com:3333/admin/js/public.js"></script>
    <script type="text/javascript">
        //授权url
        scope = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb7dc9db1bd06e502&redirect_uri='+encodeURIComponent(window.location.href)+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

        // setCookie('openid', GetQueryString('code'));
        if(GetQueryString('code') == null){
            // window.location.href = scope;
        }
        // alert(hex_sha1("西电912abc"));
        access_token_url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxb7dc9db1bd06e502&secret=ab23b32df03c19deea350a35c415f151'
        jsapi_ticket_url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=up-1mcopl4c9HEdfV0dhCenTQy8RLf41y5aE8uF386aRhzjKq2Jo6N0GdloLTZaTZBODosM8cAh_mhnJVlS977vxP00X0AJbocsW8SkS4AAKWMeAFAOAQ&type=jsapi'
        access_token = 'jpcsfFT3qYGzIF8pIsRrxFKSKbz8Cc8BbJv0qkIHN_ZXDUJwSWsRZC66IetEOy2wUUazTWF3zPpBrJKmDIKe_9MiOdguhH5GOJzS_dk77ScACSjAAAGIY';
        jsapi_ticket = 'sM4AOVdWfPE4DxkXGEs8VIPh7zLFbFom2IcmR9I3BDKmsE3Wmd6QJY1w_VPH-tGQQd-1gTQqeNFTRQwB4zSrvg';

        signature = {
            noncestr:'630602', 
            jsapi_ticket:jsapi_ticket, 
            timestamp:new Date().getTime()/1000, 
            url:encodeURI(window.location.href)
        };
        ksignature = Object.keys(signature).sort();
        signature_str = '';
        for(var i=0;i<ksignature.length;i++){
            signature_str += ksignature[i] + '=' + signature[ksignature[i]] +'&';
        }
        signature_str = signature_str.substr(0, signature_str.length-1);
        wx.config({
            debug: false,
            appId:    'wxb7dc9db1bd06e502',
            timestamp: signature['timestamp'],
            nonceStr: signature['noncestr'],
            signature: hex_sha1(signature_str),
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'openLocation',
                'getLocation',
                'addCard',
                'chooseCard',
                'openCard',
                'hideMenuItems',
                'getLocation'
            ]
        });

    </script>
    <script type="text/javascript">
    wx.ready(function () {
      // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
      /*document.querySelector('#checkJsApi').onclick = function () {
        wx.checkJsApi({
          jsApiList: [
            'getNetworkType',
            'previewImage'
          ],
          success: function (res) {
            //alert(JSON.stringify(res));
          }
        });
      };*/
      // 2. 分享接口
      // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage({
            title: '雪龙瑞斯 秋田小町5KG/袋2015新米东北大米寿司米',
            desc: '雪龙瑞斯 秋田小町5KG/袋2015新米东北大米寿司米',
            link: 'http://m.cloud315.org/wap/good.php?id=200&buy=1',
            imgUrl: 'http://m.cloud315.org//upload/images/000/000/040/201512/567904ef5f129.jpg',
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () { 
                //shareHandle('frined');
            },
            cancel: function () { 
                //alert('分享朋友失败');
            }
        });


      // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
            title: '雪龙瑞斯 秋田小町5KG/袋2015新米东北大米寿司米',
            link: 'http://m.cloud315.org/wap/good.php?id=200&buy=1',
            imgUrl: 'http://m.cloud315.org//upload/images/000/000/040/201512/567904ef5f129.jpg',
            success: function () { 
                //shareHandle('frineds');
                //alert('分享朋友圈成功');
            },
            cancel: function () { 
                //alert('分享朋友圈失败');
            }
        }); 

      // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo({
            title: '雪龙瑞斯 秋田小町5KG/袋2015新米东北大米寿司米',
            desc: '雪龙瑞斯 秋田小町5KG/袋2015新米东北大米寿司米',
            link: 'http://m.cloud315.org/wap/good.php?id=200&buy=1',
            imgUrl: 'http://m.cloud315.org//upload/images/000/000/040/201512/567904ef5f129.jpg',
            success: function () { 
                //shareHandle('weibo');
                //alert('分享微博成功');
            },
            cancel: function () { 
                //alert('分享微博失败');
            }
        });
        wx.error(function (res) {
            /*if(res.errMsg == 'config:invalid signature'){
                wx.hideOptionMenu();
            }else if(res.errMsg == 'config:invalid url domain'){
                wx.hideOptionMenu();
            }else{
                wx.hideOptionMenu();
                //alert(res.errMsg);
            }*/
            if(res.errMsg){
                wx.hideOptionMenu();
            }
        });
    });
        
    function shareHandle(to) {
        /*
        var submitData = {
            module: window.shareData.moduleName,
            moduleid: window.shareData.moduleID,
            token:'',
            wecha_id:'',
            url: window.shareData.sendFriendLink,
            to:to
        };

        $.post('index.php?g=Wap&m=Share&a=shareData&token=&wecha_id=',submitData,function (data) {},'json')
        */
    }
</script>
</body>
</html>